<template>
  <div class="Relation">
    <div class="ele-title-1">
      <h4>商品上架运营的门店</h4>
      <p>该商品在以下门店运营，可进门店编辑商品的价格、库存、运费等。</p>
    </div>
    <div class="ele-div-1">
      <div><TableColumnGoodsImage :src="commodityPic" :img-size="'100px'" /></div>
      <div>
        <p>{{ commodityName }}</p>
        <p>类型:<span v-if="type==='sale'">售卖</span><span v-if="type==='lease'">租赁</span></p>
      </div>
    </div>
    <div class="ele-div-keysearch">
      <el-form ref="form" :model="formData" class="search-left child-dialog-search">

        <el-button type="primary" plain @click="resetFormData">全部</el-button>
        <city-select ref="citySelect" v-model="formData.address" @change="changedAddress" />

        <el-button type="primary" @click="search">确定</el-button>
        <!--        <el-button @click="resetFormData">重置</el-button>-->
      </el-form>
      <div class="search-right">
        <el-button type="primary" @click="addRelation">增加关联门店</el-button>
      </div>

    </div>
    <div class="ele-table">
      <el-table
        ref="elTable"
        v-loading="listLoading"
        :data="list"
        :fit="true"
        element-loading-text="正在查询中。。。"
        stripe
        @selection-change="selectChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="门店ID" prop="storeId" />
        <el-table-column label="门店名称" prop="storeName" />
        <el-table-column label="门店地址" prop="addess" />
        <el-table-column label="联系方式" prop="phone" />
        <el-table-column label="营业时间" prop="busTime" />
        <el-table-column label="仓库类型" prop="warehouseType" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              @click="editHandle(scope.row)"
            >编辑</el-button>
            <el-button plain type="primary" @click="cancelHandle(scope.row, $event)">取消关联</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="ele-div-footer">
        <div class="footer-left">
          <el-button plain size="small" @click="allSelection">全选</el-button>
          <el-button plain size="small" @click="cancelLinkShop">取消关联</el-button>
        </div>
        <div class="pagination">
          <div />
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="limit"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChange"
            @current-change="currentPageChange"
          />
        </div>
      </div>
    </div>
    <!-- 新增门店 -->
    <!--    <el-dialog :visible.sync="dialogVisible" width="80%">
      <div slot="title" class="ele-dialog-title">选择门店</div>
      <div class="ele-div-keysearch">
        <div class="search-left">
          <el-button type="primary" plain @click="resetForm">全部</el-button>
          <el-select v-model="form.address.shengId" @change="getDialogCityListByid">
            <el-option v-for="(item,index) in dialogAddress.provinceList" :key="index" :value="index" :label="item.province.name" />
          </el-select>
          <el-select v-model="form.address.shiId" @change="getDialogVillageListByid">
            <el-option v-for="(item,index) in dialogAddress.cityList" :key="index" :value="index" :label="item.city.name" />
          </el-select>
          <el-select v-model="form.address.quId" @change="getDialogVillage">
            <el-option v-for="(item,index) in dialogAddress.villageList" :key="index" :value="index" :label="item.name" /></el-select>
        </div>
        <div class="search-right search-flex">
          <div class="ele-input">
            <el-input v-model="form.shopKeyWords" suffix-icon="el-icon-search" />
          </div>
          <el-button type="primary" @click="searchForm">确定</el-button>
          <el-button  @click="resetForm">重置</el-button>
        </div>
      </div>
      <div class="ele-table">
        <el-table
          ref="elTable"
          v-loading="listDialogLoading"
          :data="BindData"
          :fit="true"
          element-loading-text="正在查询中。。。"
          @selection-change="dialogSelectChange"
          height="400px"
          stripe
        >
          <el-table-column type="selection" />
          <el-table-column label="门店ID" prop="storeId" />
          <el-table-column label="门店名称" prop="storeName" />
          <el-table-column label="门店地址" prop="addess" />
          <el-table-column label="联系方式" prop="phone" />
          <el-table-column label="营业时间" prop="busTime" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                @click="addOrder(scope.row)"
              >添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-div-footer">
          <div class="footer-left">
            <el-button plain size="small" @click="dialogAllSelection">全选</el-button>
            <el-button plain size="small" @click="selectAddShop">添加</el-button>
            <el-button plain size="small" @click="addShop">新增门店</el-button>
            <el-button plain size="small" @click="resetForm">刷新列表</el-button>
          </div>
          <div class="pagination">
            <div />
            <el-pagination
              background
              :page-sizes="[10, 20, 30, 50, 100]"
              :page-size="dialogLimit"
              :pager-count="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dialogTotal"
              @size-change="dialogPageSizeChange"
              @current-change="dialogCurrentPageChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
import CitySelect from '@/components/CitySelect'
import { linkShopList, unlinkShop } from '@/api/commodity'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'

/** 关联门店管理 */
export default {
  name: 'Relation',
  components: { CitySelect, TableColumnGoodsImage },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      list: [],
      listLoading: true,
      page: 1,
      limit: 10,
      total: 0,
      type: '',
      id: null,
      commodityPic: '1',
      commodityName: '',

      formData: {
        allCity: true,
        address: {
          province: null,
          city: null,
          village: null
        },
        shopKeyWords: ''
      },
      selectList: []

    }
  },
  created() {
    this.init()
  },
  activated() {
    this.init()
  },
  methods: {
    /** 增加关联门店 */
    addRelation() {
      this.$router.push({
        name: 'StoreSetting',
        query: {
          p: this.$ed({
            commodityInfo: {
              goodsId: this.id,
              goodsName: this.commodityName,
              goodsImg: this.commodityPic,
              type: this.type
            }
          })
        }
      })
    },
    init() {
      const params = this.$dd(this.$route.query.p)
      this.id = params.goodsId
      this.commodityPic = params.goodsImg
      this.commodityName = params.goodsName
      this.type = params.type
      this.getList()
    },
    changedAllCity() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.$refs.citySelect.resetFields()
      }
    },
    changedAddress() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.formData.allCity = false
      } else {
        vm.formData.allCity = true
      }
    },
    resetFormData() {
      this.formData.shopKeyWords = ''
      this.changedAllCity()
      this.reloadTableData()
    },
    search() {
      this.reloadTableData()
    },
    pageSizeChange(pageSize) {
      this.limit = pageSize
      this.getList()
    },
    currentPageChange(page) {
      this.page = page

      this.getList()
    },
    reloadTableData() {
      this.page = 1
      this.total = 0
      this.BindTable = []
      this.getList()
    },
    /** 获取列表*/
    getList() {
      const data = {
        commodityId: this.id,
        type: 1,
        province: '',
        city: '',
        area: '',
        shopKeyWords: '',
        page: this.page,
        limit: this.limit
      }
      if (this.formData.address.province) {
        data.province = this.formData.address.province.code
      }
      if (this.formData.address.city) {
        data.city = this.formData.address.city.code
      }
      if (this.formData.address.village) {
        data.area = this.formData.address.village.code
      }
      if (this.formData.shopKeyWords) {
        data.shopKeyWords = this.formData.shopKeyWords
      }
      linkShopList(data).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },

    /** 编辑 */
    editHandle(row) {
      this.$router.push({ name: 'EditStoreSetting',
        query: { p: this.$ed({
          shopInfo: row,
          commodityInfo: { goodsId: this.id, goodsName: this.commodityName, goodsImg: this.commodityPic, type: this.type }
        })
        }
      })
    },

    /** 取消关联门店 */
    cancelHandle(row, evt) {
      let target = evt.target
      if (target.nodeName === 'SPAN') {
        target = evt.target.parentNode
      }
      target.blur()

      const data = {
        shopIds: row.storeId,
        commodityId: this.id
      }
      this.$confirm('是否取消已选择的关联门店?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        unlinkShop(data).then(response => {
          this.$notify.success({
            title: '成功',
            message: '取消关联成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '异常',
            message: '取消关联异常'
          })
          this.getList()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    /** 表格单选触发*/
    selectChange(e) {
      this.selectList = []
      e.forEach(element => {
        this.selectList.push(element.storeId)
      })
    },
    /** 全选*/
    allSelection() {
      this.$refs.elTable.toggleAllSelection()
      /* if (this.list) {
        this.list.forEach(inf => {
          this.$refs.elTable.toggleRowSelection(inf)
        })
      } else {
        this.$refs.elTable.clearSelection()
      }*/
    },

    /** 批量取消关联*/
    cancelLinkShop() {
      let idString = ''
      if (!this.selectList || this.selectList.length <= 0) {
        return this.$notify.error({
          title: '错误',
          message: '未选择商品'
        })
      } else {
        this.selectList.forEach(item => {
          if (idString) {
            idString = idString + ',' + item
          } else {
            idString = idString + item
          }
        })
        const data = {
          shopIds: idString,
          commodityId: this.id
        }
        this.$confirm('是否取消已选择的关联门店?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          unlinkShop(data).then(response => {
            this.$notify.success({
              title: '成功',
              message: '取消关联成功'
            })
            this.getList()
          }).catch(response => {
            this.$notify.error({
              title: '异常',
              message: '取消关联异常'
            })
            this.getList()
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.Relation {
  padding: 0px 20px;
  p {
    margin: 0;
    padding: 0;
  }
  .ele-title-1 {
    p {
      color: gray;
      margin-top: -10px;
      font-size: 0.95rem;
    }
  }
  .ele-div-1 {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 40px 0px;
    div:first-child {
      width: 100px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    div:last-child {
      p {
        font-size: 0.95rem;
        padding: 10px 10px;
      }
    }
  }
  .ele-div-keysearch {
    display: flex;
    justify-content: space-between;
    .search-left {
      display: flex;
      ::v-deep.el-select,
      .ele-input,
      .el-button {
        margin-left: 15px;
      }
      ::v-deep.el-select {
        width: 100px;
      }
    }
    .search-flex {
      display: flex;
      ::v-deep.el-button {
        margin-left: 15px;
      }
    }
  }
  .ele-table {
    width: 100%;
    margin-top: 40px;
    .ele-div-footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 0px 100px 0px;
      .footer-left {
        ::v-deep.el-button {
          width: 100px;
          margin: 0px;
        }
      }
    }
  }
}
</style>
